<template>
  <tm-app ref="app">
    <!-- #ifndef H5 -->
    <tm-navbar :title="data.title"></tm-navbar>
    <!-- #endif -->
    <tm-sheet :padding="[20]" :margin="[0]">
      <tm-text _class="text-weight-b" :font-size="30">基本信息</tm-text>
    </tm-sheet>
    <tm-sheet
      :margin="[20]"
      :padding="[0]"
      :border="20"
      :round="2"
      color="#d9e3f5"
    >
      <view class="flex company-list">
        <view class="lf-lable">名称</view>
        <view class="flex-sub flex alItem">{{
          data.detailInfo.name || data.detailInfo.label
        }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">类型</view>
        <view class="flex-sub flex alItem">{{ data.detailInfo.typeName }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">代码</view>
        <view class="flex-sub flex alItem">{{ data.detailInfo.code }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">简称</view>
        <view class="flex-sub flex alItem">{{ data.detailInfo.name }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">标识</view>
        <view class="flex-sub flex alItem">{{ data.detailInfo.code }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">创建时间</view>
        <view class="flex-sub flex alItem">{{
          data.detailInfo.metadata?.createTime || data.detailInfo.createTime
        }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">更新时间</view>
        <view class="text-weight-b flex-sub flex alItem">{{
          data.detailInfo.updateTime
        }}</view>
      </view>
      <view class="flex company-list">
        <view class="lf-lable">简介</view>
        <view class="text-weight-b flex-sub flex alItem pd10">{{
          data.detailInfo.remark
        }}</view>
      </view>
    </tm-sheet>
  </tm-app>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import * as config from '../relation/config/menuOperate'
import { reactive } from 'vue'
// #ifdef H5
import { onMounted, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
// #endif

const data = reactive<any>({
  title: '详情',
  detailInfo: {}
})
onLoad(async query => {
  if (query && query.item) {
    let item = JSON.parse(query.item)
    if (!item.key) {
      data.detailInfo = item
    } else {
      let res = await config.loadSettingMenu()
      findObject(res.children, item.key)
    }
  }
})
async function findObject(arr: any[], key: any) {
  arr.forEach(item => {
    if (item.key === key) {
      getMenuList(item)
    }
    if (item.children && item.children.length > 0) {
      findObject(item.children, key)
    }
  })
}
async function getMenuList(obj: { item: { directory: any } }) {
  data.detailInfo = obj.item.directory
}

// #ifdef H5
onMounted(() => {
  const route = useRoute()
  const instance = getCurrentInstance()
  const queue = instance?.appContext.config.globalProperties.$queue
  if (queue) {
    queue.push({
      id: route.meta.id,
      title: route.meta.title,
      path: route.path
    })
  }
})
// #endif
</script>

<style lang="scss">
@import '../../common/style/global.scss';
.company-list {
  font-size: 16px;
  /* padding:15px; */
  /* height: 50px;
    line-height: 50px; */
  border-bottom: 2px solid #eaeef5;
  background-color: #fff;
  min-height: 50px;
  color: #666667;
}
.flex-sub {
  flex: 1;
  text-align: left;
  padding-left: 20px;
}
.lf-lable {
  width: 100px;
  // color: #6f7686;
  border-right: 2px solid #eaeef5;
  display: flex;
  align-items: center;
  text-indent: 10px;
  background: #f5f6fd;
}
.alItem {
  align-items: center;
}
</style>
